<template>
  <div class="chart-panel">
    <div class="panel-header">
      <div class="panel-title">实时数据流监控</div>
      <div class="panel-actions">
        <el-button size="small">今日</el-button>
        <el-button size="small">本周</el-button>
        <el-button size="small">本月</el-button>
      </div>
    </div>
    <div ref="streamChart" class="chart"></div>
  </div>
</template>

<script>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import * as echarts from 'echarts';

export default {
  name: 'RealTimeDashboard',
  setup() {
    const streamChart = ref(null);
    let chartInstance = null;

    onMounted(() => {
      initChart();
      window.addEventListener('resize', handleResize);
    });

    onBeforeUnmount(() => {
      if (chartInstance) {
        chartInstance.dispose();
      }
      window.removeEventListener('resize', handleResize);
    });

    const initChart = () => {
      if (!streamChart.value) return;

      chartInstance = echarts.init(streamChart.value);

      const option = {
        backgroundColor: 'transparent',
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(20, 30, 60, 0.9)',
          borderColor: '#2a4a7a',
          textStyle: {
            color: '#e4e8f0'
          },
          axisPointer: {
            type: 'shadow',
            shadowStyle: {
              color: 'rgba(50, 150, 250, 0.1)'
            }
          }
        },
        legend: {
          data: ['在线接入', '离线接入', '数据流量'],
          textStyle: {
            color: '#a0b1d0'
          },
          right: 10,
          top: 10
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top: '15%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00'],
          axisLine: {
            lineStyle: {
              color: '#3a4a7a'
            }
          },
          axisLabel: {
            color: '#8898b8'
          }
        },
        yAxis: [
          {
            type: 'value',
            name: '接入数量',
            nameTextStyle: {
              color: '#8898b8'
            },
            axisLine: {
              lineStyle: {
                color: '#3a4a7a'
              }
            },
            axisLabel: {
              color: '#8898b8'
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(58, 74, 122, 0.5)'
              }
            }
          },
          {
            type: 'value',
            name: '数据量(MB)',
            nameTextStyle: {
              color: '#8898b8'
            },
            axisLine: {
              lineStyle: {
                color: '#3a4a7a'
              }
            },
            axisLabel: {
              color: '#8898b8'
            },
            splitLine: {
              show: false
            }
          }
        ],
        series: [
          {
            name: '在线接入',
            type: 'bar',
            barWidth: '25%',
            data: [820, 932, 901, 934, 1290, 1330, 1240],
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#00d296' },
                { offset: 1, color: '#00a876' }
              ])
            }
          },
          {
            name: '离线接入',
            type: 'bar',
            barWidth: '25%',
            data: [20, 32, 41, 34, 30, 33, 40],
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#ff5a5a' },
                { offset: 1, color: '#cc4848' }
              ])
            }
          },
          {
            name: '数据流量',
            type: 'line',
            yAxisIndex: 1,
            data: [120, 132, 101, 134, 290, 230, 240],
            smooth: true,
            symbol: 'circle',
            symbolSize: 8,
            lineStyle: {
              width: 3,
              color: '#0096ff'
            },
            itemStyle: {
              color: '#0096ff',
              borderWidth: 2,
              borderColor: '#0f1c3c'
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(0, 150, 255, 0.5)' },
                { offset: 1, color: 'rgba(0, 150, 255, 0.1)' }
              ])
            }
          }
        ]
      };

      chartInstance.setOption(option);
    };

    const handleResize = () => {
      if (chartInstance) {
        chartInstance.resize();
      }
    };

    return {
      streamChart
    };
  }
};
</script>

<style scoped>
.chart-panel {
  background: linear-gradient(135deg, #1a2a52, #152245);
  padding: 1vw;
  border-radius: 1vw;
  box-shadow: 0 0.31vw 0.83vw rgba(0, 0, 0, 0.3);
  border: 0.05vw solid #2a3a6a;
  height: 50vh;
  box-sizing: content-box;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1vw;
}

.panel-title {
  font-weight: 600;
  color: #c0d0f0;
  font-size: 1vw;

}

.chart {
  height: 50vh;
  width: 100%;
}

@media (max-width: 768px) {
  .chart {
    height: 27.78vh;
  }
}
</style>
